<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
    props: {},
    computed: {},
    data() {
        return {
            // 外部传入
            apiConfig:null,
            // 外部传入
            appWindow: null,
            loading: true,
            uuid: this.$vFN.Utils.getUuid(),
            imggggg: "",
            // 上传方式
            type: 2,
            // 分组
            groupList: [],
            albumId: "",
            // 窗口显示
            boxVisible: false,
            fileItem: null,
            videoName: "",
            // 上传扩展限制
            accept: "",
            // 大小限制
            maxSize: 0,
            maxSizeText: "",
        };
    },
    methods: {
        // 关闭窗口
        editBoxClose() {
            this.boxVisible = false;
            this.fileItem = null;
        },
        // 取消
        editBoxCancel() {
            this.editBoxClose();
        },
        delRes() {
            this.fileItem = null;
        },
        async getFile(event) {
            this.$vFN.Tools.setLoad(true);
            let _item = await this.getFileInfo(event.target.files[0]);

            if (_item.size <= this.maxSize) {
                this.fileItem = _item;
            } else {
                this.$vFN.Tools.messageError(
                    "上传内容大小不可超过" + this.maxSizeText
                );
            }

            // maxSize
            this.$vFN.Tools.setLoad(false);
        },
        // 获取文件信息
        async getFileInfo(file_) {
            // 获取文件类型
            let _type = file_.type.split("/")[0];
            // 扩展名
            let _imgName = file_.name;
            let _idx = _imgName.lastIndexOf(".");
            let _ext = null;
            let _name = _imgName.substring(0, _idx);
            // 如果存在
            if (_idx != -1) {
                // 解析扩展名 并转大写
                _ext = _imgName.substr(_idx + 1).toUpperCase();
                // 转小写
                _ext = _ext.toLowerCase();
            }
            let _data = {};

            _data = await this.getVideoInfo(file_);

            _data.ext = _ext;
            _data.file = file_;
            _data.type = _type;
            _data.name = _name;
            if (this.videoName == "") {
                this.videoName = _name;
            }
            _data.isLoad = false;

            return _data;
        },

        // 获取视频信息
        getVideoInfo(file_) {
            let that = this;
            return new Promise((resolve, reject) => {
                let fileReader = new FileReader();
                fileReader.readAsDataURL(file_);

                fileReader.onload = function (e) {
                    let video = document.createElement("video");
                    video.preload = "metadata";
                    video.src = URL.createObjectURL(file_);
                    video.onloadedmetadata = () => {
                        let _z =
                            video.videoWidth > video.videoHeight
                                ? video.videoWidth
                                : video.videoHeight;
                        let _r = 300 / _z;
                        let _w = _r * video.videoWidth;
                        let _h = _r * video.videoHeight;
                        resolve({
                            size: parseFloat(file_.size / 1024).toFixed(2) - 0,
                            width: video.videoWidth,
                            height: video.videoHeight,
                            duration: video.duration,
                            heightNew: _h,
                            widthNew: _w,
                            scale: _r,
                            url: e.currentTarget.result,
                        });
                    };
                };
            });
        },

        // 绘制封面
        coverCanvas() {
            let video = document.getElementById("video" + this.uuid);

            let canvas = document.createElement("canvas");
            canvas.width = this.fileItem.width;
            canvas.height = this.fileItem.height;
            canvas
                .getContext("2d")
                .drawImage(video, 0, 0, canvas.width, canvas.height);

            this.imggggg = canvas.toDataURL("image/png");
        },

        // 视频上传
        async updateVideo() {
            let formData = new FormData();
            formData.append("file", this.fileItem.file);
           
            let _data = await this.$vFN.Http.post(
                {
                    isQsData: false,
                    isSid: false,
                    url: this.apiConfig.fileUpload.url,
                    domain: this.apiConfig.fileUpload.domain,
                    data: formData,
                    params: {
                        type: this.type,
                    },
                    onUploadProgress: (r) => {
                        console.error("r", r.percentage);
                    },
                },
                this.appWindow
            );
            if (_data._ok) {
                return _data.data;
            } else {
                return false;
            }
        },

        // 封面上传
        async updateImg() {
           
            let _data = await this.$vFN.Http.post(
                {
                    url: this.apiConfig.imageUpload.url,
                    domain: this.apiConfig.imageUpload.domain,
                    data: {
                        file: this.imggggg,
                        type: 1,
                    },
                },
                this.appWindow
            );
            if (_data._ok) {
                return _data.data;
            } else {
                return false;
            }
        },

        // 图片上传
        async submit() {
            let _videoData = await this.updateVideo();
            if (!_videoData) {
                return false;
            }
            let _imgData = await this.updateImg();
            if (!_imgData) {
                return false;
            }
          
            this.loading = true;
            let _data = await this.$vFN.Http.post(
                {
                    url: this.apiConfig.createSubmit.url,
                    domain: this.apiConfig.createSubmit.domain,
                    data: {
                        albumId: this.albumId,
                        // 宽
                        albumWidth: this.fileItem.width,
                        // 高
                        albumHeight: this.fileItem.height,
                        // 素材大小单位KB
                        albumStore: this.fileItem.size,
                        albumUrl: _videoData.url,
                        // 视频封面URL
                        coverUrl: _imgData.url,
                        // 视频名称
                        name: this.videoName,
                        type: this.type,
                    },
                    onUploadProgress: (r) => {
                        console.error("r", r.percentage);
                    },
                },
                this.appWindow
            );
            if (_data._ok) {
                this.loading = false;
                this.editBoxClose();
                this.onSuccess();
                this.$vFN.Tools.messageSuccess("上传成功");
            }
        },

        // 获取 素材分组
        async getGroup() {
           
            let _data = await this.$vFN.Http.post(
                {
                    url: this.apiConfig.albumList.url,
                    domain: this.apiConfig.albumList.domain,
                    data: {
                        type: this.type,
                    },
                },
                this.appWindow
            );
            if (_data._ok) {
                this.groupList = _data.data;
            }
            console.log(_data.data);
        },

        // 获取配置信息
        async getData() {
           
            let _data = await this.$vFN.Http.post(
                {
                    url: this.apiConfig.fileConfig.url,
                    domain: this.apiConfig.fileConfig.domain,
                },
                this.appWindow
            );
            if (_data._ok) {
                // 上传格式
                let _list = _data.data.videoSuffixLst;
                let _arr = [];
                _list.forEach((item) => {
                    _arr.push("." + item);
                });
                this.accept = _arr.join(",");

                // 上传大小
                let _maxSize = _data.data.videoSize;
                let _text = _maxSize + "KB";
                if (_maxSize > 1024) {
                    _text = parseFloat(_maxSize / 1024).toFixed(1) + "MB";
                }
                this.maxSizeText = _text;
                this.maxSize = _maxSize;
            }
        },
        async init() {
            this.loading = true;
            this.boxVisible = true;
            await this.getData();
            await this.getGroup();
            this.loading = false;
        },

        // 成功回调
        onSuccess() {},
        // 取消回调
        onCancel() {},
        // 失败回调
        onError() {},
    },
    watch: {},
    mounted() {
        this.init();
    },
    beforeCreate() {},
};
</script>